@import "../ea-ui-base-style.scss";

$types: (
  "primary": #409eff,
  "success": #67c23a,
  "warning": #e6a23c,
  "danger": #f56c6c,
  "info": #e4e7ed,
);

.ea-timeline-item_wrap {
  position: relative;
  padding-bottom: 20px;
  padding-left: 28px;
  list-style: none;

  .ea-timeline-item_circle {
    position: absolute;
    left: 0;
    z-index: 1;

    display: block;
    width: 12px;
    height: 12px;
    font-size: 12px;

    border-radius: 50%;
    background-color: #e4e7ed;

    @each $type in map-keys($types) {
      &.ea-timeline-item--#{$type} {
        background-color: map-get($types, $type);
        color: map-get($types, $type);
      }
    }
  }

  .ea-timeline-item_tail {
    z-index: 0;
    position: absolute;
    left: 0.3281rem;
    height: 100%;
    border-left: 2px solid #e4e7ed;
  }

  .ea-timeline-item_container {
    position: relative;
    top: -4px;
    font-size: 14px;

    display: flex;
    flex-direction: column;

    .ea-timeline-item_timestamp {
      color: #909399;
      line-height: 1;
      margin-top: 8px;
    }

    .ea-timeline-item_content {
      color: #303133;
    }

    &.ea-timeline-item_timestamp--top {
      flex-direction: column-reverse;

      .ea-timeline-item_timestamp {
        margin-top: 0;
        margin-bottom: 8px;
      }
    }

    &.ea-timeline-item_timestamp--bottom {
      flex-direction: column;
    }
  }

  &.ea-timeline-item_circle--large {
    .ea-timeline-item_circle {
      width: 14px;
      height: 14px;
    }

    .ea-timeline-item_tail {
      left: 0.3906rem;
    }

    .ea-timeline-item_container {
      font-size: 16px;
    }
  }
}
